<template>
  <div>
    <i-form class="form" ref="form" :model="formValidate" :rules="ruleValidate">
      <i-form-item label="用户名" prop="name">
        <!-- <input v-model="formValidate.name"/> -->
        <i-input v-model="formValidate.name"></i-input>
      </i-form-item>
      <i-form-item label="邮箱" prop="email">
        <i-input v-model="formValidate.email"></i-input>
      </i-form-item>
      <div>
        <i-checkbox v-model="checkbox">同意协议</i-checkbox>
      </div>
      <i-checkbox-group v-model="selectCheck">
        <i-checkbox label="Twitter"
        >Twitter</i-checkbox>
        <i-checkbox label="Github"
        >Github</i-checkbox>
        <i-checkbox label="Facebook"
        >Facebook</i-checkbox>
      </i-checkbox-group>
      <div>{{ selectCheck }}</div>
    </i-form>
    <button @click="handleSubmit">提交</button>
    <button @click="handleReset">重置</button>
  </div>
</template>
<script>
import iForm from '@/components/form/form.vue'
import iFormItem from '@/components/form/form-item.vue'
import iInput from '@/components/input/input.vue'
import iCheckbox from '@/components/checkbox/checkbox.vue'
import iCheckboxGroup from '@/components/checkbox/checkbox-group.vue'
export default {
  components: {
    iForm,
    iFormItem,
    iInput,
    iCheckbox,
    iCheckboxGroup
  },
  data () {
    return {
      // 表单数据
      formValidate: {
        name: '雪舞',
        email: '111@qq.com'
      },
      // 校验规则
      ruleValidate: {
        name: [
          { required: true, message: '用户名不能为空' } // trigger为空，就是校验全部规则
          // { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' }, // 只校验blur事件
          { type: 'email', message: '邮箱格式不正确', trigger: 'change' } // 只校验change事件
        ],
      },
      // checkbox
      checkbox: true,
      selectCheck: ['Facebook', 'Twitter']
    }
  },
  watch: {
    "formValidate.name": {
      handler (newVal) {
        console.log('name==', newVal)
      }
    }
  },
  mounted () {
    setTimeout(() => {
      console.log('重新更改checkbox', this.checkbox = false)
    }, 1000)
  },
  methods: {
    handleSubmit () {
      this.$refs.form.validate((valid) => {
        console.log('valid', valid)
        if (valid) {
          console.log('提交成功')
        } else {
          console.log('表单校验失败')
        }
      })
    },
    handleReset () {
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.form {
  line-height: 36px;
}
</style>